<template>
  <div class="box-card">
    <el-card>
      <el-scrollbar class="content" height="86vh" min-size="1px">
        <el-card shadow="always">
          <img :src="topImage" alt="顶部图片" class="top-image" />
        </el-card>
        <div slot="header" class="clearfix mt-4">
          <span class="main-title">{{ articleData.title }}</span>
        </div>
        <p class="htmls" v-html="text"></p>
        <AuthorWrapper
          :nickname="props.articleData.author.nickname"
          :avatar="props.articleData.author.avatar"
        />
        <div class="text-section">
          <div v-for="(item, index) in result" :key="index">
            <component :is="item" />
          </div>
        </div>
        <CommentSection
          :articleId="props.articleData.id"
          @report="(comment) => emit('report', comment)"
        />
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup>
import { ElCard, ElRow, ElCol } from "element-plus";
import { typeIdEnum } from "@/utils/articleConfig";
import AuthorWrapper from "@/components/AuthorWrapper/index.vue";
import CommentSection from "@/components/CommentSection/index.vue";
const emit = defineEmits(["report"]);
const props = defineProps({
  articleData: {
    type: Object,
    default: () => ({}),
  },
});
const topImage = ref("");
const handleData = (item) => {
  if (item.type === typeIdEnum.text) {
    // 使用 h 函数返回一个 VNode 对象
    return h(
      "p",
      {
        class: "text-section",
      },
      item.text
    );
  }
  if (item.type === typeIdEnum.picture) {
    console.log(item.text);
    // 使用 h 函数返回一个 VNode 对象，并动态绑定 src 属性
    return h("img", {
      src: item.text,
      alt: "图片",
      class: "image-section",
    });
  }
  if (item.type === typeIdEnum.topTitle) {
    return h(
      "h2",
      {
        class: "main-title",
      },
      item.text
    );
  }
};
const result = ref([]);
const text = computed(() => {
  return (
    (Array.isArray(props.articleData.blocks) &&
      props.articleData.blocks.length > 0 &&
      props.articleData.blocks[0].text) ||
    ""
  );
});
watchEffect(() => {
  topImage.value = JSON.parse(props.articleData.image)[0].url;
  console.log(props.articleData);

  result.value = props.articleData.blocks.map((item) => {
    return handleData(item);
  });
});
</script>

<style>
.box-card {
  padding: 0 20%;
  height: 90vh;
}

.main-title {
  font-size: 24px;
  font-weight: bold;
}

.image-section {
  width: 100%;
  object-fit: cover;
}

.top-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.text-section {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.htmls {
  img {
    max-width: 90%;
  }
}
</style>
